<template>
  <div class="login-container">
    <!-- 顶部导航栏 -->
    <VanNavBar
      title="登录"
      class="login-header"
      :border="false"
    />

    <!-- 登录表单区域 -->
    <div class="login-form-wrapper">
      <!-- 表单Logo -->
      <div class="logo-container">
        <VanImage
          src="/logo.png"
          alt="Logo"
          class="logo"
        />
        <p class="app-name">小鸡词典</p>
      </div>

      <!-- 登录表单 -->
      <VanForm class="login-form">
        <!-- 用户名/手机号输入框 -->
        <VanField
          v-model="username"
          name="username"
          placeholder="请输入用户名或手机号"
          :rules="[{ required: true, message: '请输入用户名或手机号' }]"
          class="form-item"
        >
          <template #left-icon>
            <VanIcon name="user" class="input-icon" />
          </template>
        </VanField>

        <!-- 密码输入框 -->
        <VanField
          v-model="password"
          type="password"
          name="password"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
          class="form-item"
          :show-password="showPassword"
        >
          <template #left-icon>
            <VanIcon name="lock" class="input-icon" />
          </template>
          <template #right-icon>
            <VanIcon 
              :name="showPassword ? 'eye-o' : 'closed-eye'" 
              class="input-icon" 
              @click="togglePasswordVisibility"
            />
          </template>
        </VanField>

        <!-- 记住密码选项 -->
        <div class="login-options">
          <VanCheckbox v-model="rememberPassword" class="remember-checkbox">
            记住密码
          </VanCheckbox>
          <router-link to="/forGetPwd" class="forgot-password">忘记密码?</router-link>
        </div>

        <!-- 登录按钮 -->
        <VanButton
          type="primary" 
          class="login-button"
          @click="handleLogin"
        >
          登录
        </VanButton>

        <!-- 注册链接 -->
        <div class="register-link">
          还没有账号? <router-link to="/register">立即注册</router-link>
        </div>
      </VanForm>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from "@/utils/axios.js";
import { useUserStore } from '@/stores/user'
import { showToast } from 'vant';
import 'vant/lib/toast/style';
const router = useRouter();
const userStore = useUserStore();
// 表单数据
const username = ref('');
const password = ref('');
const rememberPassword = ref(false);
const showPassword = ref(false);

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

// 登录方法（用户后续自己实现具体逻辑）
const handleLogin = () => {
    const url = "api/users/login";
    // 1. 先获取 Store 实例
    const userStore = useUserStore();
    axios.post(url, {
        "phone": username.value,
        "encryptedPassword": password.value
    })
        .then(res => {
            if (res.code==200){
                userStore.setUser(res.user);
                sessionStorage.setItem("user",JSON.stringify(res.user))
                sessionStorage.setItem("token",res.data)
                sessionStorage.setItem("user", JSON.stringify(res.user));
                showToast('登入成功');
                router.push("/home");
            }else {
                showToast('登入失败，请重试');
            }
        })
        .catch(err => {
            // 补充：添加错误处理（如登录失败提示）
            console.error("登录失败", err);
        });
};
</script>

<style lang="less" scoped>
.login-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

.login-header {
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.login-form-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px 24px 24px;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}

.app-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.login-form {
  background-color: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-item {
  margin-bottom: 20px;
}

.input-icon {
  color: #999;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  font-size: 14px;
}

.remember-checkbox {
  color: #666;
}

.forgot-password {
  color: #1989fa;
  text-decoration: none;
}

.login-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  border-radius: 24px;
}

.register-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

.register-link a {
  color: #1989fa;
  text-decoration: none;
}
</style>